<template>
  <div>
    <!--下拉菜单-->
    <ul class="toggle-type">
      <li @click="typeShow">
        <span class="select">{{typeName}}<span class="icon icon-xia"></span></span>
        <ul class="drop-down" v-show="isShowType">
          <li v-for="(type,index) in typeList" :key="index" :class="{active:typeIndex==index}" @click.stop="toggleType(type,index)">{{type.name}}</li>
        </ul>
      </li>
      <li @click="statusShow">
        <span class="select" >{{statusName}}<span class="icon icon-xia"></span></span>
        <ul class="drop-down" v-show="isShoWStatus">
          <li v-for="(status,index) in statusList" :key="index" :class="{active:statusIndex==index}" @click.stop="toggleStatus(status,index)">{{status.name}}</li>
        </ul>
      </li>
    </ul>

    <!--拍品列表-->
    <product-list :productList="productList" title="productLots"></product-list>

    <pagination :total="total" v-on:listenToChildEvent="getPageIndex"></pagination>


  </div>
</template>

<script>
  import {getStatusMapByKey} from '../../../assets/js/tools';
  import {getMyProductList} from '../../../assets/js/getData';
  export default {
    name: "myBid",
    data(){
      return {
        typeList:[],
        statusList:[],
        type:null,
        status:null,
        typeName:'全部拍品',
        statusName:'竞拍中',
        typeIndex:0,
        statusIndex:0,
        isShowType:false,
        isShoWStatus:false,

        pageSize:10,//每页显示
        pageNum:1,//第几页

        productList:[],
        total:null,

      }
    },
    created(){
      //拍品分类
      let eProductType = getStatusMapByKey('eProductType');
      let fixedPrice = eProductType['fixedPrice'].val;//一口价1
      let auction =  eProductType['auction'].val;//竞拍2
      this.typeList= [
        {id:null,name:'全部拍品'},
        {id:auction,name:'竞拍拍品'},
        {id:fixedPrice,name:'一口价拍品'}
      ];
      //拍品状态
      let eProductStatus = getStatusMapByKey('eProductStatus');
      let inPreview = eProductStatus['inPreview'].val;//预展中
      let inAuction =  eProductStatus['inAuction'].val;//竞拍中
      let deal =  eProductStatus['deal'].val;//已成交
      this.status = inAuction;
      this.statusList= [
        {id:inAuction,name:'竞拍中'},
        {id:inPreview,name:'预展中'},
        {id:deal,name:'已成交'}
      ];

      this.getMyProductList();

    },
    methods:{
      getPageIndex(pageIndex){
        this.pageNum = parseInt(pageIndex);
        this.getMyProductList();
      },
      toggleType(type,index){
        this.typeIndex = index;
        this.typeName = type.name;
        this.type = type.id;
        this.isShowType = !this.isShowType;
        this.getMyProductList();
      },
      toggleStatus(status,index){
        this.statusIndex = index;
        this.statusName = status.name;
        this.status = status.id;
        this.isShoWStatus=!this.isShoWStatus;
        this.getMyProductList();
      },
      typeShow(){
        this.isShowType = !this.isShowType;
      },
      statusShow(){
        this.isShoWStatus = !this.isShoWStatus;
      },
      //获取我参与竞拍的拍品列表
      async getMyProductList(){
        let params = {
            status:this.status,
            type:this.type,
            pageSize:this.pageSize,
            pageNum:this.pageNum
          };
        let res = await getMyProductList(params);
        if(res.data.reqResult.code>0){
          this.productList = res.data.data;
          this.total = Math.ceil(res.data.total / this.pageSize);
          if(this.total==0){
            this.total=1;
          }
        }else {
          Toast(res.data.reqResult.msg);
        }
      },

    }
  }
</script>

<style scoped>
  /*下拉菜单*/
  .toggle-type{
    display: flex;
    justify-content: space-between;
    padding: 0 0.5rem;
    padding-top: 0.65rem;
    padding-bottom: 0.65rem;
    background-color: #FFFFFF;
  }
  .toggle-type>li{
    width: 45%;
    border: 1px solid #999999;
    border-radius: 2px;
    position: relative;
    color: #656565;
    font-size: 0.7rem;
  }
  .select{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 5px;
    height: 25px;
    line-height: 25px;
  }
  .select .icon-xia{
    color: #656565;
  }
  .drop-down{
    position: absolute;
    top: 26px;
    left: 0;
    width: 100%;
    background-color: #ffffff;
    box-shadow: 0px 1px 23px 0px rgba(0,0,0,0.2);
    border-radius: 2px;
    z-index: 10;
  }
  .drop-down li{
    text-align: center;
    line-height: 35px;
    border-bottom: 1px solid #F2F2F2;
    color: #282828;
    font-size: 0.7rem;
  }
  .drop-down li:last-child{
    border-bottom: none;
  }
  .drop-down li.active{
    color: #C50000;
  }
</style>
